<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>新增角色</title>
<link rel="stylesheet" href="${staticPath}/static/ztree/css/metroStyle/metroStyle.css" type="text/css"></link>
<%@ include file="/commons/basejs.jsp"%>
<script type="text/javascript" src="${staticPath}/static/ztree/js/jquery.ztree.all.min.js"></script>

</head>
<style>
.z-body {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 5%
}
.layui-input-inline{
   width: 250px;
}
</style>
<body>

	<form class="layui-form layui-form-pane"  enctype="multipart/form-data" >
		<div class="z-body">
			<div class="layui-form-item">
				<label for="roleName" class="layui-form-label"> <span
					class="x-red">*</span>角色名称 </label>
				<div class="layui-input-inline">
					<input type="text" id="roleName" name="name" required
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label for="description" class="layui-form-label"> <span
						class="x-red">*</span>描述 </label>
					<div class="layui-input-inline">
						<input type="text" id="description" name="description"
							lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>		
			<div class="layui-form-item">
		    	<div class="layui-inline">
				<label class="layui-form-label"><span class="x-red">*</span>权限选择</label>			
				 <div class="layui-input-inline">
                    <input type="hidden" name="menus">
                    <ul id="treeDemo" class="ztree"></ul>
                </div> 
                </div>
            </div>
			<div style="height: 60px"></div>
		</div>
		<div class=""
			style="width: 100%;height: 42px;background-color: white;border-top:1px solid #e6e6e6;position: fixed;bottom: 1px;margin-left:0px;padding-top:6px">
			<div class="layui-form-item" style=" float: right;margin-right: 10%">
				<button class="layui-btn" lay-filter="addRole" lay-submit="">新增</button>
				<button class="layui-btn layui-btn-primary" id="close"
					onclick="dream_close()">取消</button>
			</div>
		</div>
	</form>
	
<script  type="text/javascript">
 var setting = {
       check: {
            enable: true
       },
       data: {
            simpleData: {
                enable: true
             }
       }
  };
  var zNodes =${resTree};
  $(document).ready(function(){
          $.fn.zTree.init($("#treeDemo"), setting, zNodes);        
  });

layui.use('form', function(){
  //只有执行了这一步，部分表单元素才会自动修饰成功
  var form = layui.form; 
  //但是，如果HTML是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
  form.render();
});    


 //自定义验证规则
  layui.form.verify({
    name: function(value){
      if(value.trim() == ""){
        return '请输入角色名';
      }
    }
    ,description: function(value){
      if(value.trim() == ""){
        return '请输入描述';
      }   
    }
  });
  
  // 提交监听
	layui.form.on('submit(addRole)', function(data) {
     var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
     var nodes = treeObj.getCheckedNodes(true);
     var menus=[];
	    for(var item in nodes){
	         menus.push(nodes[item].id);
	    }
        data.field.menus=menus;
	    var data =data.field;
		debugger;
		$.ajax({
			type : 'POST',
			url : 'addRole',
			dataType : 'json',
			contentType : 'application/json',
			data : JSON.stringify(data),//往后台发送的是data.field，即一个{name：value}的数据结构
			async : false,
			success : function(result) {
				if (result.success) {
				    window.top.layui.layer.msg(result.msg);
				    dream_close();	
				    window.parent.layui.table.reload('roleList');					   
				} else {
					 window.top.layui.layer.msg(result.msg, {
						icon : 5,//图标
						anim : 6//抖动
					});
				}	
			}
		});
		 return false;
});

</script>
</body>
</html>
